{{ $baseUrl := .Site.BaseURL }}
<nav class="navbar navbar-default navbar-fixed-top" id="navbar-main">
    <div class="container">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="navbar-brand">
                {{ if isset .Site.Params "logo"}}
                    <a class="logo" href="{{.Site.Params.logo.link}}">
                        <img src="/{{.Site.Params.logo.image}}" alt="University logo"></img>
                    </a>
                {{ end }}
                {{ if isset .Site.Params "navbar_hierarchy" }}
                {{ $hierarchy_len := len .Site.Params.navbar_hierarchy }} 
                    {{if gt $hierarchy_len 1}} 
                        {{ range first (sub $hierarchy_len 1) (sort .Site.Params.navbar_hierarchy ".position") }}
                            <a href="{{.link}}">{{.name}}</a>
                            /
                        {{ end }}
                    {{ end }}
                    {{ range last 1 (sort .Site.Params.navbar_hierarchy ".position") }}
                        <a href="{{.link}}">{{.name | safeHTML }}</a>
                    {{ end }}
    
                {{end}}
            </div>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="#navbar-collapse-1">

            <!-- Left Nav Bar -->
            <ul class="nav navbar-nav navbar-right">
                {{ range .Site.Menus.main }}
                    {{ if .HasChildren }}    
                        <!-- <li class="dropdown"><a data-scroll href="{{ $baseUrl }}{{ .URL }}"> test </a></li> -->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{.Name}} <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                              {{ range .Children }}
                                <li><a href="{{ .URL }}">{{ .Name }}</a></li>
                              {{end}}
                            </ul>
                          </li>
                    {{else}}
                        <li class="nav-item"><a data-scroll href="{{ .URL }}">{{ .Name }}</a></li>
                    {{ end }}
                {{ end }}
                
            </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>
